<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>小小购物车</title>
	<!-- <script src="https://unpkg.com/vue@next"></script> -->
	<script src="js/vue.global.js"></script>
	<link rel="stylesheet" href="css/com.css">
</head>
<body>
	
<div id="app">
	<table border="1" cellpadding="5" cellspacing="0" width="600px">
		<caption>小小购物车</caption>
		<tr bgcolor="#f5deb3">
			<th>编号</th>
			<th>品名</th>
			<th>单价</th>
			<th>数量</th>
			<th>金额</th>
		</tr>
		<tr align="center" v-for="(item, key) in products">
			<td>{{item.id}}</td>
			<td>{{item.name}}</td>
			<td>{{item.price}}</td>
			<td><input type="number" class="inline_50" v-model.number="item.quantity"></td>
			<td>{{subtotal(key)}}</td>
		</tr>
		<tr align="center">
			<td colspan="3">合计：</td>
			<td>{{count}}</td>
			<td>{{total}}</td>
		</tr>
	</table>
</div>

</body>
<script>
const HelloVueApp = {
	data(){
		return{
			products:[
				{id:'80010', name:'iPhone XR 手机', price:5999, quantity:0},
				{id:'80011', name:'华为 P20 Rro 手机', price:4999, quantity:0},
				{id:'80012', name:'小米 8 手机', price:3999, quantity:0},
			]
		}
	},
	//计算属性
	computed:{
		subtotal(){
			return function(index){
				let price = this.products[index].price;
				let quantity = this.products[index].quantity;
				return price * quantity;
			}
		},
		//计算商品数量
		count:function(){
			let n = 0;
			this.products.forEach(function(value){
				n += value.quantity;
			});
			return n;
		},
		//计算总价
		total: function(){
			let sum = 0;
			this.products.forEach(function(value){
				sum += value.quantity * value.price;
			});
			return sum;
		}
	}
}
var vm = Vue.createApp(HelloVueApp).mount('#app');
</script>

</html>